<template>
<!-- 充值记录 -->
  <div class="container">
    <div class="handle-box">
      <span style="padding:8px;">姓名：</span>
      <el-input v-model="query.name"
                placeholder="姓名"
                class="handle-input mr10"></el-input>
      <span style="padding:8px;"></span>
      <el-button type="success"
                 icon="el-icon-search"
                 size="medium"
                 @click="handleSearch">搜索</el-button>
      <!-- <el-button type="warning"
                 size="medium"
                 icon="el-icon-refresh-left"
                 @click="resultClick()">重置</el-button> -->
    </div>
    <el-table :data="tableData"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection"
                       width="55"
                       align="center"></el-table-column> -->
      <el-table-column label="序号"
                       align="center"
                       width="100"
                       fixed>
        <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
      </el-table-column>
      <!-- <el-table-column label="用户头像" align="center">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.headimgurl?baseImgUrl+scope.row.headimgurl:scope.row.avatarUrl" fit="contain"></el-image>
          </template>
      </el-table-column> -->
      <el-table-column label="单号" align="center">
          <template slot-scope="scope">{{ scope.row.ordersn }}</template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center">
          <template slot-scope="scope">{{ scope.row.nickname}}</template>
      </el-table-column>
      <!-- <el-table-column label="用户电话" align="center">
          <template slot-scope="scope">{{ scope.row.mobile }}</template>
      </el-table-column> -->
    
      <el-table-column label="金额" align="center">
          <template slot-scope="scope">{{ scope.row.monetary }}</template>
      </el-table-column>
      <el-table-column label="类型" align="center">
          <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
    
       <!-- <el-table-column label="状态" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.status == 0">未支付</span>
              <span v-if="scope.row.status == 1">已支付</span>
          </template>
      </el-table-column> -->
      <el-table-column label="时间" align="center">
          <template slot-scope="scope">{{scope.row.create_time}}</template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next, jumper"
                     :current-page="query.pageIndex"
                     :page-size="query.pageSize"
                     :total="pageTotal"
                     @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';
import {getdate} from '@/utils/utils'
export default {
  name: "memberOrder",
  data () {
    return {
      docLoadPath: api.IMG_PATH,
      baseImgUrl:api.IMG_PATH,
      zzTypeist: [],
      query: {
        pageIndex: 1,
        pageSize: 10,
        name: '',
        mobile: '',
        store_id:''
      },
      pageTotal: 0,
      tableData: [],
      fId:'',
      f_text:'',
      fTextModel:false
    }
  }, 
  filters:{
    toFixedFile:function(val){
      if(!val)return '0.00';
      return Number(val).toFixed(2)
    },
    formDate: (val) => {
        if (!val) return '';
        return getdate(val);
    }
  },
  mounted () {
    this.initAjaxMethod()
    // this.ohterAjaxMethd()
  },

  methods: {
    ohterAjaxMethd(){
      this.$http.post(api.REG_BAISE_STORE_LIST)
          .then((res) => {
            console.log('项目列表', res)
            if (res.code == 1) {
              this.zzTypeist=Array.isArray(res.data)?res.data:[]
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          })
    },
    //删除
    handleDelete(data){
      this.delAjaxMethod(data.id);
    },
    //编辑
    createBus(row){
      this.$router.push({ path: '/memberCardAdd', query: {id:row.id, type: 2}})
    },
    resultClick () {
      this.query.name = '';
      this.query.pageIndex=1;
      this.initAjaxMethod()
    },
    createMethod () {
      this.$router.push({ path: '/memberCardAdd', query: { type: 1 } })
    },
    // 多选操作
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    delAllSelection () {
      let arr = [];
      if (this.multipleSelection.length <= 0) {
          this.$message({
              type: 'error',
              message: '请选择一个'
          });
          return false;
      } else {
          this.multipleSelection.forEach(item => {
              arr.push(item.id);
          });
          this.delAjaxMethod(arr.join(','));
      }
    },
    delAjaxMethod(ids){
      this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.MEMBERCARD_DEL, {ids:ids})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.$message.success('删除成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'pageIndex', val);
      this.initAjaxMethod();
    },
    handleSearch () {
      this.$set(this.query, 'pageIndex', 1);
      this.initAjaxMethod()
    },
    initAjaxMethod () {
      let data = {
        pageIndex: this.query.pageIndex,//[string]	是	当前页
        pageSize: this.query.pageSize,//[string]	是	每页条数
        name: this.query.name,//[string]	是	付款名称
      };
      this.$http.post(api.TECHNICIAN_PURCHASY_INDEX, data)
        .then((res) => {
          console.log('财务', res)
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list)?res.data.list:[];
            this.pageTotal = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        })
    }
  }
}
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
  color: #f56c6c;
}
  .green{
    color:#67C23A;
  }
</style>